<template>
    <section>
        <el-dialog
        title="选择地点"
        :visible.sync="dialog"
        width="80%"
        >
            <div id="container" class="w-2/3 " style="height:600px" />
            <el-input id="tipinput" v-model="poi" placeholder="请输入地点" />
        </el-dialog>
    </section>
</template>

<script>
import { mapKey } from '@/config/settings'
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
    name: 'BaseMap',
    props: {
        option: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            map: {},
            poi: null,
            dialog: true
        }
    },
    mounted() {
        this.init()
    },
    // beforeDestroy() {
    //     this.map && this.map.destroy()
    // },
    methods: {
        init() {
            const defaultOption = {
                key: mapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                // 初始地图中心点
                plugins: [
                    // 'AMap.Scale',
                    'AMap.PlaceSearch',
                    'AMap.AutoComplete'
                    // 'AMap.Geolocation'
                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                AMapUI: {
                    // 是否加载 AMapUI，缺省不加载
                    version: '1.1', // AMapUI 缺省 1.1
                    plugins: [] // 需要加载的 AMapUI ui插件
                }
            }
            // 输入提示
            const autoOptions = {
                input: 'tipinput'
            }
            const option = { ...defaultOption, ...option }
            AMapLoader.load(option)
                .then(AMap => {
                    console.log('AMap :>> ', AMap)
                    const map = new AMap.Map('container', { zoom: 12 })
                    const auto = new AMap.Autocomplete(autoOptions)
                    console.log('auto :>> ', auto)

                    // const marker = new AMap.Marker({
                    //     icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                    //     position: this.option.location
                    // })
                    const placeSearch = new AMap.PlaceSearch({
                        map: map
                    })
                    AMap.Event.addListener(auto, 'select', select) // 注册监听，当选中某条记录时会触发
                    function select(e) {
                        console.log(e.poi.location)
                        placeSearch.setCity(e.poi.adcode)
                        placeSearch.search(e.poi.name) // 关键字查询查询
                    }
                    this.map = map
                    // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
                    // map.addControl(new AMap.Scale())
                    // map.add(marker)
                    // map.setFitView()
                    map.on('click', function(e) {
                        console.log(
                            'e :>> ',
                            e.lnglat.getLng() + ',' + e.lnglat.getLat()
                        )
                    })
                    this.$emit('load', map, AMap)
                })
                .catch(e => {
                    console.log(e)
                })
        }
    }
}
</script>

<style lang="scss" scoped>
// 去除高德地图默认logo
::v-deep {
    .amap-logo {
        display: none !important;
        visibility: hidden !important;
    }
    .amap-copyright {
        display: none !important;
        visibility: hidden !important;
    }
}
</style>
